<template>
  <div class="page-container">
    <el-row :gutter="20" style="height: 100%">
      <leftPanel treeType="chapter" @leftClick="getTreeNotes" />
      <el-col :span="20" :xs="24" class="card-box">
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="onExport" :disabled="loading">导出</el-button>
        </el-row>
        <el-card v-loading="loading" style="margin-top: 10px">
          <!-- <div slot="header"><span>题库分组统计试题数</span></div> -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="按题型统计" name="second">
              <template v-if="activeName == 'second'">
                <ReposTable :table-data="questionTypeList" :active-name="'second'" ref="table" />
                <section-box title="图表统计">
                  <PieChart
                    v-if="questionTypeList && questionTypeList.length"
                    :chart-title="'按题型统计'"
                    :chart-id="'chart_pie_one'"
                    :pie-list="questionTypeList"
                    :pie-name="'按题型统计'"
                  />
                  <PieChartFen
                    v-if="questionTypeList && questionTypeList.length"
                    :chart-title="'按题型分值统计'"
                    :chart-id="'chart_pie_one_one'"
                    :pie-list="questionTypeList"
                    :pie-name="'按分值统计'"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按难度统计" name="fourth">
              <template v-if="activeName == 'fourth'">
                <ReposTable :table-data="questionEasyList" :active-name="'fourth'" ref="table" />
                <section-box title="图表统计">
                  <PieChart
                    v-if="questionEasyList && questionEasyList.length"
                    :chart-title="'按难度统计'"
                    :chart-id="'chart_pie_three'"
                    :pie-list="questionEasyList"
                    :pie-name="'按难易程度统计'"
                  />
                  <PieChartFen
                    v-if="questionEasyList && questionEasyList.length"
                    :chart-title="'按难度分值统计'"
                    :chart-id="'chart_pie_three_three'"
                    :pie-list="questionEasyList"
                    :pie-name="'按分值统计'"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按重要度统计" name="seven">
              <template v-if="activeName == 'seven'">
                <ReposTable :table-data="questionImportanceList" :active-name="'seven'" ref="table" />
                <section-box title="图表统计">
                  <PieChart
                    v-if="questionImportanceList && questionImportanceList.length"
                    :chart-title="'按重要度统计'"
                    :chart-id="'chart_pie_three'"
                    :pie-list="questionImportanceList"
                    :pie-name="'按重要度统计'"
                  />
                  <PieChartFen
                    v-if="questionImportanceList && questionImportanceList.length"
                    :chart-title="'按重要度分值统计'"
                    :chart-id="'chart_pie_three_three'"
                    :pie-list="questionImportanceList"
                    :pie-name="'按分值统计'"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按能力层次统计" name="third">
              <template v-if="activeName == 'third'">
                <ReposTable :table-data="questionLevelList" :active-name="'third'" ref="table" />
                <section-box title="图表统计">
                  <PieChart
                    v-if="questionLevelList && questionLevelList.length"
                    :chart-title="'按能力层次统计'"
                    :chart-id="'chart_pie_two'"
                    :pie-list="questionLevelList"
                    :pie-name="'按能力层次统计'"
                  />
                  <PieChartFen
                    v-if="questionLevelList && questionLevelList.length"
                    :chart-title="'按能力层次分值统计'"
                    :chart-id="'chart_pie_two_two'"
                    :pie-list="questionLevelList"
                    :pie-name="'按分值统计'"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按章节统计" name="five">
              <template v-if="activeName == 'five'">
                <ReposTable :table-data="questionChapterList" :active-name="'five'" ref="table" />
                <section-box title="图表统计">
                  <BarChart
                    v-if="questionChapterList && questionChapterList.length"
                    :chart-title="'按章节统计'"
                    :chart-id="'chart_bar_one'"
                    :bar-list="questionChapterList"
                  />
                  <BarChartFen
                    :chart-title="'按章节分值统计'"
                    v-if="questionChapterList && questionChapterList.length"
                    :chart-id="'chart_bar_one_one'"
                    :bar-list="questionChapterList"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按知识点统计" name="six">
              <template v-if="activeName == 'six'">
                <ReposTable :table-data="questionKnowledgeList" :active-name="'six'" ref="table" />
                <section-box title="图表统计">
                  <BarChart
                    v-if="questionKnowledgeList && questionKnowledgeList.length"
                    :chart-title="'按知识点统计'"
                    :chart-id="'chart_bar_two'"
                    :bar-list="questionKnowledgeList"
                  />
                  <BarChartFen
                    v-if="questionKnowledgeList && questionKnowledgeList.length"
                    :chart-title="'按知识点分值统计'"
                    :chart-id="'chart_bar_two_two'"
                    :bar-list="questionKnowledgeList"
                  />
                  <NoneChart v-else />
                </section-box>
              </template>
            </el-tab-pane>

            <el-tab-pane label="按相关性统计" name="first">
              <template v-if="activeName == 'first'">
                <ReposTable :table-data="questionRelevance.questionList" :active-name="'first'" ref="table" />
                <!-- <QuestionList
                  v-if="queryParams.courseId && questionFlag"
                  :repos-id="queryParams.courseId"
                  :active-name="'first'"
                  :auto-load="true"
                /> -->
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ReposTable from "./table/repos-table";
import QuestionList from "./table/question-list";
import BarChart from "../Charts/bar-chart.vue";
import PieChart from "../Charts/pie-chart.vue";
import NoneChart from "../Charts/none-chart.vue";
import BarChartFen from "../Charts/bar-chart-fen.vue";
import PieChartFen from "../Charts/pie-chart-fen.vue";
import SectionBox from "../juanGenerate/components/SectionBox.vue";
import {
  getStatisticsByRelevance,
  getStatisticsByType,
  getStatisticsByLevel,
  getStatisticsByEasy,
  getStatisticsByKnowledge,
  getStatisticsByPoint,
  getStatisticsByImportance,
} from "@/api/juan/juanQuestionRepos";

import exportTableAsXLSX from "@/utils/exportTableAsXLSX.js";

export default {
  name: "JuanReposStatistics",
  components: { ReposTable, QuestionList, BarChart, BarChartFen, PieChart, PieChartFen, SectionBox, NoneChart },
  data() {
    return {
      activeName: "second",
      activeLabel: "按题型统计",
      queryParams: {
        courseId: null,
      },
      loading: false,
      questionFlag: false,

      questionRelevance: {},
      questionRelevanceList: [],
      questionTypeList: [],
      questionLevelList: [],
      questionEasyList: [],
      questionImportanceList: [],
      questionChapterList: [],
      questionKnowledgeList: [],
    };
  },
  watch: {
    "queryParams.courseId": {
      handler(val) {
        if (val) {
          this.activeName = "second";
          //this.initByRelevance();
          this.initByType();
          this.questionFlag = false;
          this.$nextTick(() => {
            this.questionFlag = true;
          });
        }
      },
      deep: true,
      immediate: true,
    },
    activeName: {
      handler(val) {
        if (val) {
          switch (val) {
            case "second":
              this.activeLabel = "按题型统计";
              this.initByType();
              break;
            case "third":
              this.activeLabel = "按能力层次统计";
              this.initByLevel();
              break;
            case "fourth":
              this.activeLabel = "按难易程度统计";
              this.initByEasy();
              break;
            case "five":
              this.activeLabel = "按章节统计";
              this.initByChapter();
              break;
            case "six":
              this.activeLabel = "按知识点统计";
              this.initByKnowledge();
              break;
            case "seven":
              this.activeLabel = "按重要性统计";
              this.initByImportance();
              break;
            default:
              this.activeLabel = "按相关性统计";
              this.initByRelevance();
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 树节点单击事件
    getTreeNotes(obj) {
      if (obj) {
        this.queryParams.courseId = obj.treeNode.id;
      }
      //this.activeName = "first";
      this.activeName = "second";
    },

    initByRelevance() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByRelevance(param).then((res) => {
        if (res.code == 200) {
          this.questionRelevance = res.data;
        }
      });
    },

    initByType() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByType(param).then((res) => {
        if (res.code == 200) {
          this.questionTypeList = res.data;
        }
      });
    },

    initByLevel() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByLevel(param).then((res) => {
        if (res.code == 200) {
          this.questionLevelList = res.data;
        }
      });
    },

    initByEasy() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByEasy(param).then((res) => {
        if (res.code == 200) {
          this.questionEasyList = res.data;
        }
      });
    },

    initByChapter() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByKnowledge(param).then((res) => {
        if (res.code == 200) {
          this.questionChapterList = res.data;
        }
      });
    },

    initByKnowledge() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByPoint(param).then((res) => {
        if (res.code == 200) {
          this.questionKnowledgeList = res.data;
        }
      });
    },

    initByImportance() {
      let param = {
        courseId: this.queryParams.courseId,
      };
      getStatisticsByImportance(param).then((res) => {
        if (res.code == 200) {
          this.questionImportanceList = res.data;
        }
      });
    },

    onExport() {
      exportTableAsXLSX(this.$refs.table, {
        fileName: this.activeLabel,
      });
    },
  },
};
</script>
<style lang="scss" scoped>

</style>
